import {Wrapper} from './style';
import TopicDetailNav from "@/pages/TopicDetail/TopicHomeworkDetailNav";
import TextArea from "antd/es/input/TextArea";
import {Button} from "antd";
import {useEffect, useState} from "react";
import {useParams} from "react-router";
import {
    addMessage as addTeacherMessage,
    getMessage as getTeacherMessage,
    getTopicDetail as getTeacherTopicDetail
} from "@/api/teacher/topicApi.ts";
import {
    addMessage as addStudentMessage,
    getMessage as getStudentMessage,
    getTopicDetail as getStudentTopicDetail
} from "@/api/student/topicApi.ts";
import dayjs from "dayjs";

const NoData = () => {
    return (
        <Wrapper>
            <div className="no-data">
                <img src="https://www.ketangpai.com/img/img_empty.84d0931c.png" alt=""/>
            </div>
            <p>暂无数据</p>
        </Wrapper>
    )
}

const TopicDetail = () => {

    const {topicId, identity} = useParams()

    const [topicDetail, setTopicDetail] = useState<any>({})

    const [messageList, setMessageList] = useState([])

    const initMessage = () => {
        identity === '老师' ? (
            // 老师
            getTeacherMessage(topicId || '').then(res => {
                setMessageList(res.data.data)
            })
        ) : (
            // 学生
            getStudentMessage(topicId || '').then(res => {
                setMessageList(res.data.data)
            })
        )
        console.log(messageList)
    }

    useEffect(() => {
        // 获取数据
        identity === '老师' ? (
            // 老师
            getTeacherTopicDetail(topicId || '').then(res => {
                setTopicDetail(res.data.data)
            })
        ) : (
            // 学生
            getStudentTopicDetail(topicId || '').then(res => {
                setTopicDetail(res.data.data)
            })
        )
        initMessage()

    }, [])

    const [inputValue, setInputValue] = useState('')

    const handleChange = (e: any) => {
        setInputValue(e.target.value)
    }

    const sendMessage = () => {
        // 添加评论
        identity === '老师' ? (
            addTeacherMessage(topicId || '', inputValue).then(() => {
                setInputValue('')
                initMessage()
            })
        ) : (
            addStudentMessage(topicId || '', inputValue).then(() => {
                setInputValue('')
                initMessage()
            })
        )
    }

    return (
        <Wrapper>
            <TopicDetailNav/>
            <div className="main">
                <section className='first'>
                    <span className='mark'>话题</span>
                    <h1>
                        <span>{topicDetail.title}</span>
                    </h1>
                    <div className="detail">
                        <div className="left">
                            <img src="https://assets.ketangpai.com//Public/Common/img/40/37.png" alt=""/>
                            <b>{topicDetail.createUser}</b>
                            <span>创建于 {dayjs(topicDetail.createAt).format('YYYY/MM/DD HH:mm')}</span>
                        </div>
                    </div>
                </section>
                <div className="comment-list">
                    <section className="container">
                        <div className="comment-main">
                            <div className="left">
                                <img src="https://assets.ketangpai.com//Public/Common/img/40/37.png" alt=""/>
                            </div>
                            <div className="right">
                                <TextArea rows={4} placeholder="说点什么吧~" value={inputValue}
                                          onChange={handleChange}/>
                            </div>
                        </div>
                        <div className="tool">
                            <Button type={"primary"} onClick={sendMessage}>发表评论</Button>
                        </div>
                    </section>
                    <section className="list">
                        <h1>
                            全部评论
                            <span>共{messageList.length}条</span>
                        </h1>
                        <div>
                            {
                                messageList?.map((item: any, index) => (
                                    <div className="comment-item" key={index}>
                                        <div className="text">{item.message}</div>
                                        <div className="footer">
                                            <div className="left">
                                                <img src="https://assets.ketangpai.com//Public/Common/img/40/37.png"
                                                     alt=""/>
                                                <h3>{item.createUser}</h3>
                                                <span>{dayjs(item.createAt).format('YYYY-MM-DD HH:mm')}</span>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            }
                        </div>
                        {
                            messageList.length > 0 || <NoData/>
                        }
                    </section>
                </div>
            </div>
        </Wrapper>
    );
}
export default TopicDetail;